﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:ViewModels="clr-namespace:ZFCNew.ViewModels" 
    xmlns:ed="clr-namespace:Microsoft.Expression.Shapes;assembly=Microsoft.Expression.Drawing" 
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:ei="clr-namespace:Microsoft.Expression.Interactivity.Media;assembly=Microsoft.Expression.Interactions" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ei1="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:local="clr-namespace:ZFCNew.Views"
    x:Class="ZFCNew.Views.PhotoGallery"  mc:Ignorable="d"
	UseLayoutRounding="True"
	HorizontalAlignment="Left" VerticalAlignment="Top" Width="997" Height="670">
	<UserControl.Resources>
		<ViewModels:PhotoGalleryModel x:Key="ImageGalleryxamlModelDataSource" />
		<Storyboard x:Name="DescPopup">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DescBorder">
				<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.4" Value="1"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
		<Storyboard x:Name="DescHide">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="DescBorder">
				<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource ImageGalleryxamlModelDataSource}}">
        <i:Interaction.Triggers>
        	<i:EventTrigger EventName="MouseEnter" SourceObject="{Binding ElementName=grid}">
        		<ei1:ControlStoryboardAction x:Name="DescPopupOpenAction" Storyboard="{StaticResource DescPopup}"/>
        	</i:EventTrigger>
        	<i:EventTrigger EventName="MouseLeave" SourceObject="{Binding ElementName=grid}">
        		<ei1:ControlStoryboardAction x:Name="DescPopupCloseAction" Storyboard="{StaticResource DescHide}"/>
        	</i:EventTrigger>
        	<i:EventTrigger EventName="Click" SourceObject="{Binding ElementName=NextBtn}">
        		<i:InvokeCommandAction Command="{Binding GoNextCommand}"/>
        	</i:EventTrigger>
        	<i:EventTrigger EventName="Click" SourceObject="{Binding ElementName=PrevBtn}">
        		<i:InvokeCommandAction Command="{Binding GoPrevCommand}"/>
        	</i:EventTrigger>
        </i:Interaction.Triggers>

        <Canvas x:Name="ThumbHolder" d:LayoutOverrides="GridBox" Margin="0" DataContext="{Binding ImageColl}">
    		<local:Thumbnail  Canvas.Top="76" Canvas.Left="294" RenderTransformOrigin="0.5,0.5" DataContext="{Binding [0]}" Tag="0" >
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-24"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="166.658" Canvas.Left="244.67" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [1]}" Tag="1">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="6"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="269.332" Canvas.Left="210.685" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [2]}" Tag="2">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="56"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="369" Canvas.Left="272" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [3]}" Tag="3">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="20"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="588" Canvas.Left="437" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [4]}" Tag="4">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="1"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="496" Canvas.Left="394" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [5]}" Tag="5">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-25"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="833" Canvas.Top="489" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [6]}" Tag="6">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="16"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="450" Canvas.Top="35" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [7]}" Tag="7">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="6"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="666" Canvas.Top="498" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [8]}" Tag="8">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-26"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="883" Canvas.Top="586" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [9]}" Tag="9">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-5"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="537" Canvas.Top="519" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [10]}" Tag="10">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-27"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="593" Canvas.Left="610" RenderTransformOrigin="0.5,0.5" DataContext="{Binding [11]}" Tag="11">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="883.5" Canvas.Top="68.5" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [12]}" Tag="12">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="53"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="567" Canvas.Left="756" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [13]}" Tag="13">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="31"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="475" Canvas.Left="259" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [14]}" Tag="14">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="45"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="562" Canvas.Left="168" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [15]}" Tag="15">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-25"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="571" Canvas.Left="300" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [16]}" Tag="16">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-41"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Left="876" Canvas.Top="382" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [17]}" Tag="17">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-42"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="452" Canvas.Left="131" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [18]}" Tag="18">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="48"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="584" Canvas.Left="38" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [19]}" Tag="19">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-9"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
            <local:Thumbnail Canvas.Top="491" Canvas.Left="17" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" DataContext="{Binding [20]}" Tag="20">
    			<local:Thumbnail.RenderTransform>
    				<CompositeTransform Rotation="-20"/>
    			</local:Thumbnail.RenderTransform>
    		</local:Thumbnail>
    	</Canvas>
    	<Grid Grid.ColumnSpan="3" Margin="0,98,20,0" VerticalAlignment="Top" HorizontalAlignment="Right">
    		<Border Margin="57,0,56,0" BorderThickness="1" BorderBrush="White" Background="#00000000" MaxWidth="566" MaxHeight="400" MinWidth="400" MinHeight="200" Width="566" Height="400">
    			<Grid x:Name="grid" Background="#CC000000">
    				<Image Margin="0" Source="{Binding CurrentImage.Source}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    				<Grid x:Name="DescBorder"  Height="100" VerticalAlignment="Bottom" Background="#BB1D1D1D" Grid.RowSpan="2" Opacity="0">
    					<TextBlock HorizontalAlignment="Left" Text="{Binding CurrentImage.Title}" VerticalAlignment="Top" Foreground="#FFFFBB00" FontSize="18.667" TextTrimming="WordEllipsis" Margin="9,4,0,0"/>
    					<TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding CurrentImage.Desc}" VerticalAlignment="Top" Foreground="White" Margin="9,36,0,0" FontSize="16" TextTrimming="WordEllipsis" FontFamily="Lucida Sans Unicode"/>
    				</Grid>
                
                
    			</Grid>
    		</Border>
    		<Button x:Name="NextBtn" Grid.Column="2" Height="40" Style="{StaticResource NextPrevButtonStyle}" VerticalAlignment="Center" Margin="0" Width="63" HorizontalAlignment="Right" IsEnabled="{Binding CanGoNext, Mode=OneWay}" Background="#FFFFC700"/>
    		<Button x:Name="PrevBtn" Height="40" Style="{StaticResource NextPrevButtonStyle}" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0" Width="63" HorizontalAlignment="Left" IsEnabled="{Binding CanGoPrev, Mode=OneWay}" Background="#FFFFC700">
    			<Button.RenderTransform>
    				<CompositeTransform ScaleX="-1"/>
    			</Button.RenderTransform>
    		</Button>

    	</Grid>

    </Grid>
</UserControl>